<template>
  <view class="content">
    <view class="subsection">
      <view
        class="subsection_item"
        :class="subsection_index == 0 ? 'active' : ''"
        @click="clickSubsection(0)"
        >撤/持</view
      >
      <view class="center"></view>
      <view
        class="subsection_item"
        :class="subsection_index == 1 ? 'active' : ''"
        @click="clickSubsection(1)"
        >成交记录</view
      >
    </view>

    <view>
      <view class="tabs">
        <view
          v-for="(item, index) in tabs_list"
          class="tabs_item"
          :class="`tabs_item${index + 1}`"
          :key="item"
          >{{ item }}</view
        >
      </view>

      <view class="tabs row" v-for="item in userEntrustList">
        <view class="tabs_item1 row_item row_item1">
          <view class="row_item_name">{{ item.product.name }}</view>
          <view class="row_item_time">{{ item.created_at.slice(0, 10) }}</view>
        </view>
        <view class="tabs_item2 row_item row_item2"
          >{{ item.entrusted_price }}/{{
            item.max_transaction_price
              ? item.max_transaction_price
              : item.entrusted_price
          }}</view
        >
        <view class="tabs_item3 row_item row_item3"
          >{{ item.entrusted_num }}/{{ item.transaction_num }}</view
        >
        <view
          class="tabs_item4 row_item row_item4"
          :class="item.type == 'buy' ? 'color1' : 'color2'"
          >{{ item.type == "buy" ? "买入" : "卖出" }}</view
        >
      </view>

      <empty :show="userEntrustList.length == 0"></empty>
    </view>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      subsection_index: 0,
      tabs_list: ["时间", "委托价/成交价", "委托/成交量", "业务"],
      page: 1,
      limit: 10,
      userEntrustList: [],
    };
  },
  onShow() {
    this.getUserEntrustLog(true);
  },
  // 页面的触底事件
  onReachBottom() {
    this.page++;
    this.$u.throttle(this.getUserEntrustLog(), 1000, true);
  },
  methods: {
    clickSubsection(index) {
      this.subsection_index = index;
      this.tabs_list =
        index == 0
          ? ["时间", "委托价/成交价", "委托/成交量", "业务"]
          : ["时间", "成交价", "成交量", "业务"];

      this.userEntrustList = [];
      this.getUserEntrustLog(true);
    },

    async getUserEntrustLog(refresh) {
      if (refresh) {
        this.page = 1;
      }
      let res = await api.entrust_userEntrustLog({
        method: "get",
        query: {
          type: "", //buy：买入，sell：卖出
          status: this.subsection_index == 0 ? "ing" : "finished", // ing：委托中,  closed：已关闭，closed：已关闭，finished:已完成 / (not_status)
          // not_status: this.subsection_index == 1 ? "ing" : "",
          page: this.page,
          limit: this.limit,
        },
        loading: "加载中",
      });

      if (res.code === 0) {
        if (refresh) {
          this.userEntrustList = res.data;
        } else {
          this.userEntrustList = this.userEntrustList.concat(res.data);
        }
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 0 30rpx 100rpx 30rpx;
  background: $bg-color1;
  min-height: calc(100vh - 44px);
}
.subsection {
  position: relative;
  margin: 0 -30rpx;
  display: flex;
  align-items: center;
  &_item {
    flex: 1;
    // width: 80rpx;
    height: 90rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #cccccc;
    line-height: 90rpx;
    text-align: center;
  }
  .center {
    position: absolute;
    top: 26rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 2rpx;
    height: 38rpx;
    background: #292b2b;
  }
  .active {
    color: #1fe7e7;
    border-bottom: 4rpx solid #1fe7e7;
  }
}
.tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -30rpx;
  width: 750rpx;
  height: 100rpx;
  background: #292b2b;
  &_item {
    // flex: 1;
    height: 100rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #cccccc;
    line-height: 100rpx;
    text-align: center;
  }
  &_item1 {
    width: 176rpx;
  }
  &_item2 {
    flex: 1;
  }
  &_item3 {
    flex: 1;
  }
  &_item4 {
    width: 176rpx;
  }
}
.row {
  width: 750rpx;
  height: 140rpx;
  color: #ffffff;
  background: transparent;
  border-bottom: 2rpx solid #313535;
  text-align: center;
  justify-content: flex-start;
  &_item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &_name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_time {
      margin-top: 6rpx;
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #cccccc;
      line-height: 34rpx;
      text-align: left;
    }
  }
  &_item1 {
    padding: 30rpx;
  }
  .color1 {
    color: #ff5757;
  }
  .color2 {
    color: #1fe7e7;
  }
}
</style>